<template>
	<scroll-view class="backview" bounces="false">
		<lexiconNavVue title="我的小蜂巢" />
		<view class="content-view">
			<view class="userinfo-leftview">
				<image class="userinfo-headimg"
					:src="planBeeUserInfo.one_inch_photo ? planBeeUserInfo.one_inch_photo : placeImage" place
					mode="aspectFill" />
				<view class="myPage-head-userinfo">
					<text class="userinfo-username">{{planBeeUserInfo.user_name}}</text>
				</view>
			</view>
		</view>
		<view class="bee-banner-bottom"></view>
		<view class="center-menu-view">
			<view class="center-menu-menuBtn" @click="turnTointegral">
				<view class="center-menu-number">{{showIntegral}}</view>
				<view class="center-menu-title">积分</view>
				<view class="center-menu-eng-title">Points</view>
			</view>
			<view class="centerLine"></view>
			<view class="center-menu-menuBtn">
				<view class="center-menu-number">{{beeplanData.cardNumber}}</view>
				<view class="center-menu-title">补卡券</view>
				<view class="center-menu-eng-title">Make-up Cards</view>
			</view>
			<view class="centerLine"></view>
			<view class="center-menu-menuBtn" @click="invitedRecordTap">
				<view class="center-menu-number"></view>
				<view class="center-menu-title">邀请记录</view>
				<view class="center-menu-eng-title">Invitation Records</view>
			</view>
		</view>
		<scroll-view class="bee-plan-badge" :style="{ height: scrollHeight + 'px'}" scroll-y
			:scroll-with-animation='true'>
			<view class="bee-plan-badgeItem">
				<view class="plan-dage-content" v-for="(item, index) in badgeList" :key="index">
					<view class="plan-dage-borderTwo" :style="{backgroundColor: item.color}">
						<view class="plan-dage-borderThree">
							<image class="plan-dage-img" :src="item.imageUrl" @click="turnToDageDetailTap"
								:data-index="index"></image>
						</view>
					</view>
					<text class="plan-dage-title">{{item.title}}</text>
				</view>
			</view>
		</scroll-view>
		<view class="beeplan-bottom-button" :style="{ height: bottomHeight + 'px'}">
			<view :class="`${beeplanData.days < 7 ? 'redColor' : 'blackColor'} plan-time-endStr`"
				v-if="beeplanData.isExpire == 0">距离过期{{beeplanData.expireTime}} 还有<text
					style="color: red;">{{beeplanData.days}}</text>天</view>
			<view class="plan-renew-view" @click="planRenewTap" v-if="beeplanData.isExpire == 0">立即续费</view>
			<view class="plan-renew-view" style="margin-top: 15px;" @click="planRenewTap" v-else-if="beeplanData.isExpire == 1">已过期，去续费</view>
			<view class="plan-renew-view" style="margin-top: 15px;" @click="planRenewTap" v-else>开通蜂计划</view>
		</view>
		<popPromptBox v-if="showPopbox" :msg="message" @confirm="hidePromptbox"></popPromptBox>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				placeImage: require('@/static/image/fjj/avatar.png'),
				showPopbox: false,
				scrollHeight: 0,
				showIntegral: 0,
				bottomHeight: 0,
				beeplanData: {},
				badgeList: [],
				planBeeUserInfo: {}
			}
		},
		onReady() {
			this.bottomHeight = this.$util.getBottomHeight() + 70;
			const that = this
			uni.createSelectorQuery().select('.center-menu-view').boundingClientRect(rect => {
				that.scrollHeight = uni.getSystemInfoSync().windowHeight - rect.bottom - this.bottomHeight - 25;
			}).exec();
		},
		mounted() {
			this.planBeeUserInfo = JSON.parse(uni.getStorageSync('USER_INFO'))
			console.log('this.planBeeUserInfo', this.planBeeUserInfo);
			this.checkExpire();
			this.getBeePlanUserBadgeList();
		},
		methods: {
			hidePromptbox() {
				this.showPopbox = false;
			},
			checkExpire: function() {
				this.$http.checkExpire({}).then(res => {
					if (res.code == 200) {
						if (res.data.integral) {
							this.beeplanData = res.data;
							this.showIntegral = this.$util.changeNumber(res.data.integral, 2);
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			//续费按钮点击事件
			planRenewTap: function() {
				this.message = this.$statusCode.payPopMessage;;
				this.showPopbox = true;
			},
			//积分详情点击状态
			turnTointegral: function() {
				uni.navigateTo({
					url: '/pages/planBee/workClickIntegraldetailsView'
				})
			},
			//邀请记录
			invitedRecordTap: function() {
				uni.navigateTo({
					url: '/pages/planBee/wordClickInvitedRecordList'
				})
			},
			//获取徽章列表
			getBeePlanUserBadgeList: function() {
				var that = this;
				this.$http.getBeePlanUserBadgeList({}).then(res => {
					console.log('getBeePlanUserBadgeList', res);
					if (res.code == 200) {
						var badgelist = res.data.map(function(item) {
							if (item.isLight == true) {
								item.imageUrl = item.imgUrl + 'on.png';
							} else {
								item.imageUrl = item.imgUrl + 'off.png';
								item.color = '#fff'
							}
							return item;
						});
						this.badgeList = badgelist;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			//查看徽章详情
			turnToDageDetailTap: function(e) {
				console.log('e', e);
				uni.navigateTo({
					url: '/pages/planBee/workClickBadgeDetailsView?badgeData=' + JSON.stringify(this.badgeList[
						e.currentTarget.dataset.index]),
				})
			},
		}
	}
</script>

<style lang="less">
	.backview {
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		top: 0;
		right: 0;
		background: var(--themeGradientBack);
	}

	.bee-banner-bottom {
		width: 100%;
		height: 54rpx;
		background-image: url(../../static/image/fjh/bee-bottom-line.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		z-index: 100;
		margin-top: -25px;
	}

	.content-view {
		width: 100%;
		height: 120px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		background-image: url(../../static/image/fjh/bee-banner-top.png);
	}

	.userinfo-leftview {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		margin-left: 40px;
		margin-top: -20px;
	}

	.bee-plan-badge {
		width: 90%;
		margin: 15px 5%;
		background: var(--beeGradeTopBack);
		border-radius: 15px;
	}

	.userinfo-headimg {
		width: 65px;
		height: 65px;
		border-radius: 33px;
		margin-right: 10px;
		overflow: hidden;
		border: 1px solid rgb(0, 0, 0);
	}

	.myPage-head-userinfo {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.userinfo-username {
		font-size: 16px;
		color: rgb(0, 0, 0);
		margin-top: 5px;
		font-family: 'hzgb';
	}

	.center-menu-view {
		width: 100%;
		height: 80px;
		margin-top: -2px;
		background: #141001;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		position: relative;
		box-shadow: 2px 0px 5px 2px #000000;
	}

	.centerLine {
		background-color: rgb(160, 160, 160);
		height: 45px;
		width: 1.5px;
	}

	.center-menu-menuBtn {
		width: 110px;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.center-menu-number {
		color: rgb(255, 255, 255);
		width: 100%;
		font-size: 18px;
		text-align: center;
		font-weight: bolder;
	}

	.center-menu-title {
		color: rgb(255, 255, 255);
		width: 100%;
		font-size: 15px;
		font-family: 'hzgb';
		text-align: center;
	}

	.center-menu-eng-title {
		color: rgb(255, 255, 255);
		width: 100%;
		font-size: 10px;
		text-align: center;
	}

	.bee-plan-badgeItem {
		width: 100%;
		padding: 10px 0px;
		border-radius: 15px;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		/* justify-content: space-around; */
	}

	.plan-dage-content {
		width: 30%;
		height: 155px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 12.5px;
		margin-left: 2.5%;
	}

	.plan-dage-borderone {
		width: 90px;
		height: 122.5px;
		background-color: black;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.plan-dage-borderTwo {
		width: 93px;
		height: 125.5px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 27.5px;
	}

	.plan-dage-borderThree {
		width: 89px;
		height: 120px;
		display: flex;
		background-color: #969696;
		align-items: center;
		justify-content: center;
		border-radius: 27.5px;
	}

	.plan-dage-img {
		width: 85px;
		height: 117.5px;
		border-radius: 27.5px;
	}

	.plan-dage-title {
		font-size: 14px;
		width: 95px;
		text-align: center;
		margin-top: 5px;
		color: white;
	}

	.beeplan-bottom-button {
		width: 100%;
		background: black;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		position: fixed;
		bottom: 0px;
	}

	.plan-time-endStr {
		width: 100%;
		margin-top: 10px;
		font-size: 14px;
		text-align: center;
	}

	.redColor {
		color: red;
	}

	.blackColor {
		color: rgb(255, 255, 255);
	}

	.plan-renew-view {
		width: 325px;
		border-radius: 35px;
		height: 35px;
		line-height: 35px;
		font-size: 14px;
		font-family: 'hzgb';
		text-align: center;
		background: var(--themeButtonTopBack);
		color: white;
		// margin-top: 5px;
	}
</style>